<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>彩练帮你办</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="css/reveal.css">	
<link href="css/animate.css" rel="stylesheet" />

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);


    $(function(){

        $(".lever").click(function(){
            $(".select_lever_content").show();
        });
        $(".lever2").click(function(){
            $(".select_lever_content2").show();
        });
        $(".go_back").click(function(){
            $(".select_lever_content").hide();
            $(".select_lever_content2").hide();
        });
    })
</script>
<style>
textarea::-webkit-input-placeholder {
    color: #b5b5b6;
    font-weight: bold;
}
textarea:-moz-placeholder {
    color: #b5b5b6;
    font-weight: bold;
}
input::-webkit-input-placeholder {
    color: #b5b5b6;
    font-size: 1.2rem;
}
input:-moz-placeholder {
    color: #b5b5b6;
    font-size: 1.2rem;
}

::-webkit-scrollbar {
    width: 0 !important;
}
::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}
.mask {
	background-color: rgba(0, 0, 0, 0.9);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	color: #fff;
	font-size: 1.5rem;
	}
	.mask h1{
		text-align: center;
	}
	.mask p{
		margin-top: 2rem;
	}

	.mask .close-reveal-modal {
		font-size: 4rem;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		cursor: pointer;
		} 

</style>
</head>
<body>

	<!DOCTYPE html>
	<html>
	<head>
	  <meta charset="UTF-8">
	  <title>jQuery 上传图片方法</title>
	</head>
	<body>



<div class="wrap">
	<div class="top4">
		<a href=""><img src="img/btn_back.png" class="btn_back3"></a>
		<a id="fdbutton"  class="toptxt2">提交</a>
		<div class="clear"></div>
	</div>
	<div class="conbox4">
		<div class="name">请输入标题（6-30字）</div>
		<input type="text" class="input_txt"  maxlength="30" id="title">   
		<textarea  class="new-content" name="newcontent" id="new-content" placeholder="内容要求：
&nbsp;&nbsp;&nbsp;&nbsp;1.请遵循属地和职能原则选择提问对象；
&nbsp;&nbsp;&nbsp;&nbsp;2.请简明扼要地表达事件的发生地、时间、具体内容、诉求等；
&nbsp;&nbsp;&nbsp;&nbsp;3.请客观陈述事实情况，避免使用情绪化语音；
&nbsp;&nbsp;&nbsp;&nbsp;4.请勿泄露个人隐私信息；
&nbsp;&nbsp;&nbsp;&nbsp;5.请勿发布其他违反社区条例的言论（详情请点击“留言须知”）。"  onkeyup="countContent(this)" maxlength="1000"></textarea>
		<p class="num"><span id="content_num">0</span>/<span>1000</span></p>
		<script type="text/javascript">
			 function countContent(input) {
			    var content = document.getElementById('content_num');
			    if (content && input) {
			        var value = input.value;
			        value = value.replace(/\n|\r/gi, "");
			        content.innerText = value.length;
			    }
			}
		</script>
	</div>
	<div class="conbox5">
		<ul class="imgbox" id="imgBox">
			<li></li>
			<li><img src="img/img_add.jpg" class="btn_back4"></li>
	
			<div class="clear"></div>
		</ul>

		<input type="file" id="file" name="file" multiple='multiple' style="display: none;"  onchange="showPicture(this)"/>

	<div class="conbox6 lever">
		<div class="txt01 float_left">选择领域</div>
		<img src="img/icon2.png" class="txt02 float_right">
		<input class="rt" type="text" placeholder="请选择" id="text1">
	</div>
	<div class="conbox6 lever2" >
		<div class="txt01 float_left">选择分类</div>
		<img src="img/icon2.png" class="txt02 float_right">
		<input class="rt" type="text" placeholder="请选择" id="text2">
	</div>
	<a href="#"  data-reveal-id="myModal" data-animation="fade">
	<div class="conbox7">
		<img src="img/icon.png" class="float_left">
		<div class="txt float_left">留言须知</div>
	</div></a>
	<div id="myModal" class="mask">
		<h1 style="margin-top: 100px;">留言须知</h1>
		<div style="display:flex;justify-content: center">
		<p style="text-align: center;width:90%;">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对于以下范围内的留言，“彩练帮你办”平台有权删除和不予回复：<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、违反国家法律法规和涉及国家机密的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、应通过司法程序解决的，正在进行或已完成司法程序、行政复议、劳动仲裁的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、恐吓、威胁、诽谤他人或单位的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、对同一问题恶意连续、重复提交的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、提交虚假信息，语言表述模糊、问题阐述不明确的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6、使用侮辱性、歧视性等不文明语的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7、易引起恐慌、网络群体性事件等留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8、相关事项已投诉、举报或已在信访部门反映的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9、不属于现有办理单位管辖范围内的留言。<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10、涉及广告内容。</p>
		</div>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	<div class="select_lever_content ">
           <div class="select_lever animated fadeInUp">
               <p class="lever_title">
                   选择领域
                   <a class="go_back">&#215;</a>
               </p>
               <div class="all_lever">
                   

					<div class="tab-menu float_left">
						<ul>
			
						</ul>
					</div>
					<div class="tab-box float_left">
					
					</div>

               </div>
               <p class="select_footer" id="lybutton">
                   确认
               </p>
           </div>
     </div>
     <div class="select_lever_content2">
           <div class="select_lever animated fadeInUp">
               <p class="lever_title">
                   选择分类
                    <a class="go_back">&#215;</a>
               </p>
               <ul class="all_lever">
                   <li class="sel" id="1">求助</li>
                   <li id="2">咨询</li>
                   <li id="3">建言</li>
                   <li id="4">投诉</li>
                   <li id="5">感谢</li>
               </ul>
               <p class="select_footer" id="flbutton">
                   确定
               </p>
           </div>
     </div>
</div>


</body>
<script src="js/init.js"></script>
<script>

var fid=''
var cid=1
var fname=''
var  lid=''
var lname=''
$(document).on('click', '.tab-menu li', function(e) {
    $(this).css({"background-color":"#fff","color":"#c42924"});
    $(this).nextAll().css({"background-color":"#f6f6f6","color":"#000"});
    $(this).prevAll().css({"background-color":"#f6f6f6","color":"#000"});
    var _index = $(this).index();
	cid=$(this).attr('cid')
	console.log(cid)
    $(".tab-box>ul").eq(_index).show().siblings().hide();
})
$(document).on('click', '.tab-box li', function(e) {
	$('.tab-box li').css({"background-color":"#fff","color":"#000"});
    $(this).css({"background-color":"#fff","color":"#c42924"});
	fid=$(this).attr('id')
	fname=$(this).text()
	console.log(fid+'|'+fname+'x')
})
$('#lybutton').click(function(){
	$('#text1').val(fname)
	$(".select_lever_content").hide();
	$(".select_lever_content2").hide();
})
$('.all_lever li').click(function(){
	$('.all_lever li').removeClass('sel')
	$(this).addClass('sel')
	lid=$(this).attr('id')
	lname=$(this).text()
	console.log(lid+'|'+lname)
})
$('#flbutton').click(function(){
	$('#text2').val(lname)
	$(".select_lever_content").hide();
	$(".select_lever_content2").hide();
})

</script>
<script src="js/s.js"></script>

<script>
	var imgSrc = []; //图片路径
    var imgFile = []; //文件流
    var imgName = []; //图片名字
    var imgBox=$('#imgBox');
    function showPicture(imgF){
        var fileList=imgF.files;
        for(var i = 0; i < fileList.length; i++){
                    var imgSrcI = getObjectURL(fileList[i]);
                    imgName.push(fileList[i].name);
                    imgSrc.push(imgSrcI);
                    imgFile.push(fileList[i]);
            }
            addNewContent(imgBox);
  }
//图片展示
function addNewContent(obj) {
    $(imgBox).html("");
    for(var a = 0; a < imgSrc.length; a++) {
        //console.log(imgSrc);
        var oldBox = $(obj).html();
        $(obj).html(oldBox + '<li><img width="100%" class="img-rounded" title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' ><span onclick="sc('+a+')">删除</span></li>');
    }
	//		
	$(obj).append('	<li><img src="img/img_add.jpg" class="btn_back4"></li>')
	$(obj).append('	<div class="clear"></div>')
}
//图片预览路径
function getObjectURL(file) {
    var url = null;
    if(window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//删除
function sc(index){
    
   imgSrc.splice(index,1);
   index='';
   addNewContent(imgBox);
   
}
$('.conbox7').click(function(){
	$('#myModal').show()
})
$('.close-reveal-modal').click(function(){
	$('#myModal').hide()
})
$('.btn_back4').click(function(){
	$('#file').click()
})
$('#fdbutton').click(function(){

    var fd = new FormData();
	for(var i=0;i<imgFile.length;i++){   
                var reader = new FileReader();   
                reader.readAsDataURL(imgFile[i]);   
				fd.append('file'+i,imgFile[i]);
				console.log(imgFile[i])
			}
			var temp=sessionStorage.getItem('clbnb');
			let obj = eval('(' + temp + ')');
			var userid=obj.userid
 
			fd.append('type',lid);
			fd.append('field_id',cid);
			fd.append('field_cid',fid);
			fd.append('userid',userid);
			fd.append('title',$('#title').val());
			fd.append('content',$('#new-content').val());
	$.ajax({
      url: url+'/app/blog/addBlogDetail', // 上传图片的服务端 URL
      type: 'POST',
      data: fd,
      processData: false, // 因为 FormData 已经将数据处理成了合适的格式，所以不需要再进行处理
      contentType: false, // 因为 FormData 包含了文件数据，所以需要将 contentType 设为 false，以便浏览器正确处理内容类型
      success: function(data) {
        // 上传成功后返回的数据操作
		if(data==0)
		{
			alert('提交成功')
			window.location.href="index.html"
		}
        console.log(data);
      },
      error: function(data) {
        // 上传失败后返回的数据操作
        console.log('上传失败!');
      }
    });
})





</script>

</html>